<template>
  <div class="TextPopup">
    <div class="popup" @click.stop="pinClick('hide')">
      <div class="content" @click.stop="hide">
        <div class="icon" v-if="options.icon" @click.stop="pinClick('hide')">
          <i class="iconfont icon-danchuang-guanbi"></i>
        </div>
        <div class="title">
          <span>{{options.title}}</span>
        </div>
        <div class="text" v-html="options.content" :style="options.textStyle">

        </div>
        <div v-if="options.btnnum>0">
          <div class="btns" v-if="options.btnnum===1">
            <qingbtn :btStyle="options.btnStyle" :text="options.btnText" :dis="options.Dis" @Click="pinClick('fall')">
            </qingbtn>
          </div>
          <div class="btens" v-if="options.btnnum===2">
            <qingbtn :btStyle="options.btns[0].btnstyle" :text="options.btns[0].btntext"
                     :dis="options.btns[0].dis"
                     @Click="pinClick(options.btns[0].btnclick)"></qingbtn>
            <qingbtn :btStyle="options.btns[1].btnstyle" :text="options.btns[1].btntext"
                     :dis="options.btns[1].dis"
                     @Click="pinClick(options.btns[1].btnclick)"></qingbtn>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import qingbtn from '../../components/Buttons/Index'

  export default {
    name: "index",
    data: function () {
      return {
        BtStyle: {
          width: '70%',
          height: "4rem",
          background: 'red'
        },
      }
    },
    props: [
      'options'
    ],
    methods: {
      pinClick: function (str) {
        this.$emit(str)
      },
      hide:function (e) {
        return false
      }
    },
    components: {
      qingbtn
    }
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
